<template>
	<view class="store-detail">
		<view class="sde-banner"><u-swiper :list="product_list.images" height="326"></u-swiper></view>
		<view class="sde-price h120 dis_flex pl40 pr40">
			<text class="fz50 fw" style="color: #fff;">￥{{ cur_price }}</text>
			<view class="tf fz28">正在抢购中</view>
		</view>
		<view class="sde-spec bac_f pt30 pb30">
			<view class="spec-h1 ml30 fz34 fw">
				<text>{{ product_list.name }}</text>
			</view>
			<view class="spec-h2 fz26 tf_999 ml30 mt16">
				<text>{{ product_list.s_name }}</text>
			</view>
		</view>
		<view class="mt24 pl30 bac_f dis_flex fw tf_4537 h100">
			<view class="tf_22">
				选择数量
			</view>
			<view class="fz24 tf_999 dis_f mr40">
				<view class="w32 h32"><image class="w32 h32" src="../../static/image/jian.png" @click="numJian" mode="aspectFill"></image></view>
				<view class="ml30 mr30 w32 h32 fz28 tf_22">
					<u--input
						border="none"
						fontSize="14px"
						:customStyle="{ fontWeight: 'bold', width: '32rpx', height: '32rpx' }"
						v-model="p_num"
						type="number"
						inputAlign="center"
						readonly
					></u--input>
				</view>
				<view class="w32 h32"><image class="w32 h32" src="../../static/image/jia.png" @click="numJia" mode="aspectFill"></image></view>
			</view>
		</view>
		<view class="mt24 bac_f fw tf_4537 w dfd_c ac pt30">
			商品详情
			<view class="w120" style="margin-top: 26rpx;"><u-gap height="2" bgColor="#F14537"></u-gap></view>
		</view>
		<view class="pt24 pl24 pr24 bac_f mt24">
			<view class="mt20" v-for="(v, i) in product_list.content_images" :key="i"><image class="w" :src="v" mode="widthFix"></image></view>
		</view>
		<view class="w h200"></view>
		<view class="bac_f sde-footer dis_f padding24  p_f" style="width: 100%;z-index: 10;">
			<button open-type="contact">
				<view class="dfd_c ac ml18">
					<image src="../../static/image/spec-kf.png" mode="widthFix" class="w40"></image>
					<text class="fz22">客服</text>
				</view>
			</button>
			<view class="dfd_c ac ml46 p_re" @click="goStoreCart">
				<image src="../../static/image/spec-cart.png" mode="widthFix" class="w40"></image>
				<text class="fz22">购物车</text>
				<view v-if="cart_s != 0" class="w20 h20 radius50 tf tac bac_4537 p_ab" style="top: -2rpx;right:4rpx;font-size: 16rpx;">{{ cart_s }}</view>
			</view>
			<view class="radius8 w220 h88 tf43 border11 fz32 dis_f jc ml40" style="box-sizing: border-box;" @click="joinStoreCart">加入购物车</view>
			<view class="col-th radius8 w220 h88 tf fz32 dis_f jc ml24" @click="goPorductOrder">立即购买</view>
		</view>
		<!-- 弹出窗 -->
		<!-- 选择服务地址 -->
		<u-popup :show="addressPopshow" mode="bottom" @close="addressPopshow = false">
			<view class="pop-cart radius_5">
				<view class="pop-title dis_f radius_5 jc bac11" style="height: 98rpx">
					<text class="fz34 tf33 ml238">选择服务地址</text>
					<image @click="addressPopshow = false" class="w44 ml238" src="../../static/image/server_close.png" mode="widthFix"></image>
				</view>
				<view class="bac_f padding30 bz w" style="padding-bottom: 0"></view>
				<view class="address-sel">
					<view v-for="(v, i) in address_list" :key="i" class="w690 auto fz26 h136 border_b3 dis_flex">
						<view class="ml24" style="min-width: 550rpx;" @click="selectAddress(i)">
							<view class="dis_f">
								<view style="max-width: 500rpx" class="fz28">{{ v.address1 }}</view>
								<view v-if="v.default == 1" class="w52 lh28 fz20 tf_4537 border4537 ml12 tac radius4" style="background: rgba(241, 69, 55, 0.1); padding: 0 6rpx">默认</view>
							</view>
							<view class="tf_999 pt10 dis_f fz26">
								{{ v.name }}
								<view class="ml30 fz26">{{ v.phone }}</view>
							</view>
						</view>
						<view class="dis_f">
							<image src="../../static/image/search_del.png" mode="widthFix" class="w32 mr35" @click="delAddress(i)"></image>
							<image src="../../static/image/confirm5.png" mode="widthFix" class="w32" @click="editAddress(v)"></image>
						</view>
					</view>
				</view>
				<!-- <view  class="">
					<u-empty
					  text="您还没有服务地址，快去添加吧!"
					  icon="https://zsjf-bucket.oss-cn-beijing.aliyuncs.com/uploads/20220714/ff3807efb285d0598d673dccc5308bec.png"
					  marginTop="40"
					></u-empty>
				</view> -->
			</view>
			<view class="w690 lh88 fz32 tf_666 tac border7 mb30 auto radius8" @click="add_address">新增服务地址</view>
		</u-popup>
	</view>
</template>
<script>
import { getProductInfo, goProductOrder, addressDefault, addressList, addressEdit, addressDel, storeCartOrder } from '@/config/api.js';
export default {
	data() {
		return {
			statusHeight: '', //状态高度
			cart_s: '', //购物车上标
			current_address: [], //当前的地址
			address_default_list: [], //默认地址列表
			address_list: [], //地址列表
			addressPopshow: false,
			p_num: 1,
			cur_id: '',
			product_list: [],
			cur_price:'',
		};
	},
	onLoad(options) {
		console.log(options);
		this.cur_id = options.id;
		this.getProductInfo();
		this.getAllAddress();
		this.getAddressDefault();
		let res = wx.getSystemInfoSync();
		this.statusHeight = res.statusBarHeight + 44 + 'px';
	},
	methods: {
		//操作数量
		numJian(item) {
			this.p_num == 1 ? (this.p_num = 1) : this.p_num--;
			this.cur_price = (this.p_num *this.product_list.price).toFixed(2)
		},
		numJia(item) {
			this.p_num++;
			this.cur_price = (this.p_num *this.product_list.price).toFixed(2)
		},
		//跳转购物车界面
		goStoreCart() {
			let address_id = this.current_address.id;
			uni.navigateTo({
				url: '../storeCart/storeCart?address_id=' + address_id
			});
		},
		//加入购物车
		joinStoreCart() {
			this.cart_s++;
			let cart_info = [];
			let page_obj = new Object();
			page_obj.id = this.cur_id;
			page_obj.serve_num = this.p_num;
			page_obj.title = this.product_list.name;
			page_obj.s_name = this.product_list.s_name;
			page_obj.price = this.product_list.price;
			page_obj.gg_image = this.product_list.image;
			console.log(page_obj);
			if (uni.getStorageSync('store_cart_info')) {
				uni.getStorageSync('store_cart_info').forEach(v => {
					cart_info.push(v);
				});
				uni.removeStorageSync('store_cart_info');
				cart_info.push(page_obj);
				uni.setStorage({
					key: 'store_cart_info',
					data: cart_info
				});
			} else {
				cart_info.push(page_obj);
				uni.setStorage({
					key: 'store_cart_info',
					data: cart_info
				});
			}
		},
		//修改地址
		editAddress(e) {
			let page_obj = encodeURIComponent(JSON.stringify(e));
			console.log(page_obj);
			uni.navigateTo({
				url: '../../pages/editAddress/editAddress?page_obj=' + page_obj
			});
		},
		//删除地址
		delAddress(i) {
			console.log(i);
			console.log(this.address_list[i].id);
			let id = this.address_list[i].id;
			addressDel({ id: id }).then(res => {
				console.log(res);
				this.getAllAddress();
			});
		},
		//选择地址
		selectAddress(i) {
			this.current_address = this.address_list[i];
			this.addressPopshow = false;
			let id = this.cur_id;
			let num = this.p_num;
			let address_id = this.address_list[i].id;
			goProductOrder({ id: id, num: num, address_id: address_id, cart: 2 }).then(res => {
				let total = res;
				this.getPay(total);
			});
		},
		// 微信支付
		async getPay(total) {
			let payCall = await this.common.orderPay(total);
			if (payCall.errMsg == 'requestPayment:fail cancel') {
				uni.reLaunch({
					url: '../../pages/failPay/failPay?state=' + 2
				});
			} else {
				uni.reLaunch({
					url: '../../pages/successPay/successPay?state=' + 2
				});
			}
		},
		//获取默认地址
		getAddressDefault() {
			addressDefault().then(res => {
				console.log(res);
				this.address_default_list = res;
				this.current_address = res;
			});
		},
		//获取全部地址
		getAllAddress() {
			addressList().then(res => {
				console.log(res);
				if (res) {
					this.isAddress = true;
					this.address_list = res;
				}
			});
		},
		//下单并跳转
		goPorductOrder() {
			this.addressPopshow = true;
		},
		//获取商品信息
		getProductInfo() {
			let id = this.cur_id;
			getProductInfo({ id: id }).then(res => {
				console.log(res);
				this.product_list = res[0];
				this.cur_price =res[0].price
			});
		}
	}
};
</script>

<style lang="scss">
.address-sel {
	height: 666rpx;
	overflow: auto;
}
.address-sel::-webkit-scrollbar {
	/* ::-webkit-scrollbar webkit的伪元素，滚动条 
			伪元素只能有一个，不能多个同时出现，且只能放在最后面	
			两个冒号是css3的样式，主要与伪类区分。
		*/
	width: 0;
	height: 0;
	background-color: transparent;
}
button::after {
	border: none;
}
button {
	position: relative;
	display: block;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0px;
	padding-right: 0px;
	box-sizing: border-box;
	// font-size: 18px;
	text-align: center;
	text-decoration: none;
	// line-height: 1;
	line-height: 1.35;
	// border-radius: 5px;
	-webkit-tap-highlight-color: transparent;
	overflow: hidden;
	color: #000000;
	background-color: #fff;
}
.store-detail {
	.sde-price {
		background-image: url('https://hmj-test-oss.oss-cn-beijing.aliyuncs.com/uploads/20221014/05ce73c902a2997412d5a2066f0aada2.jpg');
		background-size: cover;
	}
	.sde-evaluate {
		.evaluate-info {
			text {
				display: -webkit-box;
				word-break: break-all; /*换行规则*/
				text-overflow: ellipsis; /*最后使用省略号显示*/
				overflow: hidden; /*超出部分隐藏*/
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2; /*能够显示几行*/
			}
		}
	}
}
</style>
